<template>
    <div class="console-container">
        <div v-for="(data,index) in stackList" :key="index"
            class="console-item"
            :class="[`item-${data.ModeCode}`,data.clicked ? `item-${data.ModeCode}-clicked` : '']"
            @click="consoleClick(data)"
        >
            <!-- console摘要 start -->
            <div class="abstract">

                <!-- 错误图标 -->
                <span v-if="data.ModeCode === 'error'" class="abstract-icon"
                    :class="[`abstract-icon-${data.ModeCode}`]"
                ></span>

                <div class="abstract-info">

                    <!-- 错误摘要 -->
                    <error v-if="data.ModeCode === 'error'" :data="data"/>

                    <!-- console内容 -->
                    <info v-else :data="data"/>
                </div>


                <!-- 句柄文件 -->
                <div class="dev abstract-stack" :title="data.stack.stackStuff"
                    @click="openWithCode($socket,data)"
                >{{ data.stack.stackFile }}</div>
            </div>
            <!-- console摘要 end -->

        </div>
    </div>
</template>

<script setup>
import {watch, ref} from 'vue';
import {useConsoleStore, useSocketStore} from '../store';
import Error from './consoleComponents/error.vue';
import Info from './consoleComponents/info.vue';


const consoleStore = useConsoleStore();
const stackList = ref([]);
const functionSpace = {};


// 处理stackList数据
const handleStackList = value => {
    stackList.value = value.map(item => {
        item.params.forEach(param => {
            if (param.type === 'Function') {
                if (param.source) {
                    eval(param.source);
                    param.source = functionSpace[param.funcName];
                }
            }
        });

        return {
            ...item,
            abstract: {
                info: item.params || '',
            },
        };
    });
};
let timer = null;
watch(
    () => consoleStore.stackList,
    value => {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            handleStackList(value);
        }, 100);
    },
    {deep: true}
);

const openWithCode = (socket, data) => {
    const socketStore = useSocketStore();

    const message = {
        ModeCode: 'openEditer',
        path: data.stack.stackPath
    };

    socketStore.socket.send(JSON.stringify(message));

};


const consoleClick = data => {
    stackList.value.forEach(item => {
        item.clicked = false;
    });
    data.clicked = true;
};
</script>


<style lang="scss" scoped>
.console-container {
    padding: 10px;
    width: 100%;
    height: 100%;
}

.console-item {
    position: relative;
    display: flex;
    // margin-bottom: 5px;
    flex-direction: row;
    line-height: 20px;
    padding: 10px 40px;
    width: 100%;
}

.item-console {
    border-radius: 10px;

    &::after {
        position: absolute;
        bottom: 0;
        width: calc(100% - 80px);
        border-bottom: 1px #d3e3fd solid;
        content: "";
    }

    &-clicked {
        background: #d3e3fd;
    }

    &:last-child {
        &::after {
            border-bottom: none;
            content: "";
        }
    }
}

.item-error {
    border-radius: 10px;
    background: #fcebeb;
}

.abstract {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
    line-height: 30px;
    gap: 10px;

    .abstract-icon {
        position: absolute;
        top: 5px;
        left: -25px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 10px;

        &-error {
            background: #dc362e;
        }

        &-console {
            background: #1b6ef3;
        }
    }

    &-info {
        display: flex;
        justify-content: start;
        max-width: 85%;
        flex: 1;
        flex-wrap: wrap;
        gap: 10px;
    }

    &-stack {
        position: absolute;
        right: 0;
        overflow: hidden;
        height: 100%;
        text-align: right;
        text-decoration: underline;
        color: #0b57d0;
        flex: 1;
        line-height: inherit;
        cursor: pointer;
    }
}

</style>
